<template>
  <div class="main">
    <table>
      <tr>
        <td>昵称</td>
        <td><input type="text" v-model="newInfo.nickname"></td>
      </tr>
      <tr>
        <td>用户名</td>
        <td>user1</td>
      </tr>
      <tr>
        <td>头像</td>
        <td style="display: flex;">
          <div class="avatar">
            <img :src="newInfo.avatarUrl" alt="">
          </div>
          <input type="file" name="" id="" ref="fileInput" @change="handleFileChange">
        </td>
      </tr>
      <tr>
        <td>email</td>
        <td><input type="text" v-model="newInfo.email"></td>
      </tr>
      <tr>
        <td>个性签名</td>
        <td><textarea v-model="newInfo.sign"></textarea></td>
      </tr>
      <tr>
        <td>性别</td>
        <td><Select :list="['男', '女', '保密']" v-model="newInfo.sex"></Select></td>
      </tr>
      <tr>
        <td>出生日期</td>
        <td><input type="date" v-model="newInfo.birthday" name="" id=""></td>
      </tr>
    </table>
    <div class="btn" @click="updateInfo">保存</div>
  </div>
  <popAlert v-show="modelShow">
    <template #body>
      修改成功!
    </template>
  </popAlert>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { reqGetUserInfo, reqUpdateUserInfo } from '@/apis/user';
import Select from '@/components/Select.vue';
import userStore from '@/stores/modules/user';
import ModelDialog from '@/components/ModelDialog.vue';
import popAlert from '@/components/popAlert.vue';
import request from '@/utils/request';
let modelShow = ref(false)
let info = ref({})
const fileInput = ref(null);

const handleFileChange = async (event) => {
  const files = event.target.files;
  if (files && files.length > 0) {
    // 这里可以处理文件，例如打印文件信息
    const file = files[0];
    const formData = new FormData();
    formData.append('file', file);
    try {
      const response = await request.post('/user/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      newInfo.value.avatarUrl = 'http://10.50.212.208:8080/' + response.data
    } catch (error) {
      console.error('上传失败:', error);
    }
  }
};
let newInfo = ref({
  id: userStore().userId,
  nickname: '',
  email: '',
  sign: '',
  sex: '',
  birthday: '',
  avatarUrl: ''
})
onMounted(() => {
  getInfo()
})
const getInfo = async () => {
  const res = await reqGetUserInfo(userStore().userId)
  if (res.code === 200) {
    info.value = res.data
    newInfo.value.nickname = info.value.nickname
    newInfo.value.email = info.value.email
    newInfo.value.sign = info.value.sign
    newInfo.value.sex = info.value.sex
    newInfo.value.birthday = info.value.birthday
    newInfo.value.avatarUrl = info.value.avatarUrl
  }
}
const updateInfo = async () => {
  const res = await reqUpdateUserInfo(newInfo.value)
  if (res.code === 200) {
    modelShow.value = true
  }
}
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: .3333rem;
  width: 90%;
  font-size: .25rem;

  tr {
    border: #ccc .0167rem solid;
    border-left: none;
    border-right: none;

    &:first-child {
      border-top: none;
    }

    td {
      padding: .1667rem .3333rem;
    }
  }

  .avatar {
    width: .9rem;
    height: .9rem;
    background-color: #ccc;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .btn {
    height: .6667rem;
    font-size: .4rem;
    color: #fff;
    background-color: #ff404e;
    margin: .1667rem auto;
    padding: 0 .15rem;
    text-align: center;
    line-height: .6667rem;
    border-radius: 10%;
    cursor: pointer;
  }

  input {
    border: .0167rem solid #ddd;
    padding: .0833rem .1667rem;
  }

  textarea {
    padding: .0833rem .1667rem;
    height: 5em;
    width: 60%;
    border: .0167rem solid #ddd;
    resize: none;

    //滚动条样式
    &::-webkit-scrollbar {
      width: 0.1rem;
      height: 0.1rem;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 0.1rem;
    }

    &::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      border-radius: 0.1rem;
    }

  }
}
</style>